<div id="leftcolumn" ng-controller="Umbraco.NavigationController" 
    ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
    
    <umb-sections sections="sections" ng-if="authenticated">
    </umb-sections>

    <!-- navigation container -->
    <div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'">

        <div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container span6" style="z-index: 100">
            
            <!-- the search -->
            <div ng-controller="Umbraco.SearchController" ng-if="authenticated">
                          
                <!-- Search form -->      
                <div id="search-form">
                    <div class="umb-modalcolumn-header">

                        <form class="form-search" novalidate>
                            <i class="icon-search"></i>
                            <input type="text"
                                hotkey="ctrl+space"
                                id="search-field"
                                ng-model="searchTerm"
                                class="umb-search-field search-query"
                                localize="placeholder"
                                placeholder="@placeholders_search"
                                ng-keydown="navigateResults($event)"/>                            
                        </form>
                    </div>
                </div>

                <!-- Search results -->
                <div id="search-results" class="umb-modalcolumn-body" ng-show="showSearchResults">

                    <ul class="umb-tree">
                        <li class="root">
                            <div>
                                <h5><localize key="general_searchResults">Search results</localize></h5>
                            </div>
                        
                            <ul class="umb-search-group" ng-repeat="group in groups">
                                <li ng-repeat="result in group.results" ng-class="{'current':selectedItem == result}">
                                    <div>
                                        <a ng-class="{'first':$first}" ng-click="searchHide()" ng-href="#/{{result.editorPath}}">

                                            <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
                                            {{result.name}}
                                            <small class="search-subtitle" ng-show="result.subTitle">
                                                {{result.subTitle}}
                                            </small>
                                        </a>

                                        <a href ng-click="searchShowMenu($event, {node: result})" class="umb-options"><i></i><i></i><i></i></a>
                                    </div>
                                </li>
                            </ul>

                        </li>
                    </ul>    
                </div>
            
            </div>

            <!-- the tree -->
            <div id="tree" class="umb-modalcolumn-body" ng-if="authenticated">
                <umb-tree 
                    cachekey="_"
                    eventhandler="treeEventHandler" 
                    section="{{currentSection}}" >
                </umb-tree>
            </div>
        </div>

        <div class="offset6" style="z-index: 10">
            
            <!-- The context menu -->
            <div id='contextMenu' class="umb-modalcolumn fill shadow" ng-swipe-left="nav.hideMenu()" ng-show="showContextMenu" ng-animate="'slide'">
                <umb-context-menu                     
                    menu-dialog-title="{{menuDialogTitle}}"
                    current-section="{{currentSection}}"
                    current-node="menuNode"
                    menu-actions="menuActions">
                </umb-context-menu>    
            </div>
            
            
            <!-- Tree dialogs -->
            <div id="dialog" class='umb-modalcolumn fill shadow'
                ng-swipe-left="nav.hideDialog()"
                ng-show="showContextMenuDialog" ng-animate="'slide'">
                <div class='umb-modalcolumn-header'>
                    <h1>{{menuDialogTitle}}</h1>
                </div>
                <div class='umb-modalcolumn-body'>
                </div>
            </div>
        </div>
    </div>
</div>